<template>
  <Layout>
    <div class="navBar">
      <Icon name="left" class="left" @click.native="goBack"></Icon>
      <span class="title">编辑标签</span>
      <span class="right"></span>
    </div>
    <div class="form-wrapper">
      <Notes :value="tag?.name" @update:value="update" field-name = "标签名" placeholder="请输入标签名"></Notes>
    </div>
    <div class="button_wrapper">
      <Button @click.native="remove">删除标签</Button>
    </div>
  </Layout>
</template>

<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";
import Layout from '@/components/Layout.vue';
import tagListModel from "@/models/tagListModel";
import Notes from "@/components/Money/Notes.vue"
import Button from "@/components/Button.vue";
@Component({
  components: {  Notes,Button },
})
export default class Edit extends Vue{
    tag?:{id:string,name:string}=undefined
    // 获取id
    created() {
      const id = this.$route.params.id;
      console.log(id);
      tagListModel.fetch()
    //   把所有的data{id，name}放到tags中
      const tags = tagListModel.data
    //   遍历tags，找出选中的tag的id，因为filter返回一个新数组，所以取第0项，第0项是id
      const tag = tags.filter(t =>t.id==id)[0]
      if(tag){
        this.tag=tag
        console.log(tag);
      }else{

        this.$router.replace('/notFound')
      }   
    }
    goBack(){
      this.$router.back()
    }
    update(name:string){
      console.log(name);
      if(this.tag){
        tagListModel.update(this.tag.id,name)
      }
      
    }
    remove(){
      console.log(1);
      
      if(this.tag){
        tagListModel.remove(this.tag.id)
      }
      this.$router.push('/labels')
    }
}

</script>

<style lang="scss" scoped>
.navBar{
  text-align: center;
  font-size: 16px;
  padding: 12px 16px;
  // background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  > .left{
    width: 24px;
    height: 24px;
  }
  > .right{
    width: 24px;
    height: 24px;
  }
}
.form-wrapper{
  background-color: white;
  margin-top: 8px;
}
.button_wrapper{
  text-align: center;
  padding: 16px;
  margin-top: 28px;
}
</style>